<template>
  <div class="content_padding">
    <div class="container" style="position: fixed; top: 0; left: 0;">
      <span class="deviceTitle">{{ title }}</span>
      <div>
        <el-button type="text" icon="icon iconfont iconfanhui" @click="returnPreviousPage">返回</el-button>
        <el-button type="text" icon="el-icon-position" @click="confirmModifData">提交</el-button>
      </div>
    </div>

    <div class="device_info">
      <div class="title">基本信息</div>
      <div class="basic_info">
        <div class="info-box">
          <span class="txt">车牌号码：</span>
          <el-input v-model="formInfo.number" size="medium" class="input_width" clearable placeholder="请输入" />
        </div>

        <div class="info-box">
          <span class="txt">标段：</span>
          <el-select v-model="formInfo.bidSection" size="medium" class="input_width" @change="getDeviceInfo">
            <el-option v-for="item in biaoduanList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </div>

        <div class="info-box">
          <span class="txt">设备：</span>
          <el-select v-model="formInfo.thirdPartyId" size="medium" class="input_width" placeholder="请选择">
            <el-option v-for="item in deviceList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </div>

        <div class="info-box">
          <span class="txt">车主姓名：</span>
          <el-input v-model="formInfo.name" readonly size="medium" class="input_width car-name" clearable placeholder="请选择" />
          <el-button class="btn" type="primary" size="medium" @click="selectStaffInfo">选择</el-button>
          <!--          <el-button class="btn" type="primary" size="medium" icon="el-icon-plus" circle @click="addStaffInfo" />-->
        </div>

        <div class="info-box">
          <span class="txt">车牌类型：</span>
          <el-select v-model="formInfo.model" size="medium" class="input_width" placeholder="请选择">
            <el-option v-for="item in plateNumberList" :key="item.id" :label="item.text" :value="item.id" />
          </el-select>
        </div>
        <div class="info-box">
          <span class="txt">车辆类型：</span>
          <el-select v-model="formInfo.brand" size="medium" class="input_width" placeholder="请选择">
            <el-option v-for="item in carTypeList" :key="item.id" :label="item.text" :value="item.id" />
          </el-select>
        </div>
        <div class="info-box">
          <span class="txt">车牌颜色：</span>
          <el-select v-model="formInfo.brandColor" size="medium" class="input_width" placeholder="请选择">
            <el-option v-for="item in plateNumberColorList" :key="item.id" :label="item.text" :value="item.id" />
          </el-select>
        </div>
        <div class="info-box">
          <span class="txt">车辆颜色：</span>
          <el-select v-model="formInfo.carColor" size="medium" class="input_width" placeholder="请选择">
            <el-option v-for="item in carColorList" :key="item.id" :label="item.text" :value="item.id" />
          </el-select>
        </div>
      </div>
    </div>

    <SelectStaffInfo ref="SelectStaffInfoRef" @staffInfo="getStaffInfo" />
    <AddStaffInfo ref="AddStaffInfoRef" />
  </div>
</template>

<script>
import AddStaffInfo from "../components/car-run/module/AddStaffInfo";
import SelectStaffInfo from "../components/car-run/module/SelectStaffInfo";
import HttpInterface from "../../util/httpInterface";
import constants from "../../util/constants";
import { mapActions, mapState } from "vuex";
import eventBus from "../../util/eventBus";

export default {
  components: {
    AddStaffInfo, SelectStaffInfo
  },
  data() {
    return {
      title: "添加车辆信息",
      formInfo: {
        number: "",
        name: "",
        brand: "1",
        carColor: "1",
        bidSection: "",
        model: "0",
        brandColor: "0",
        thirdPartyId: "",
      },
      carColorList: constants.VEHICLE_COLOR,
      carTypeList: constants.VEHICLE_TYPE,
      plateNumberList: constants.PLATE_NUMBER_TYPE,
      plateNumberColorList: constants.PLATE_NUMBER_COLOR,
      deviceList: []
    };
  },

  computed: {
    ...mapState(["biaoduanList"])
  },

  methods: {
    ...mapActions(["getCarDevice"]),

    getDeviceInfo() {
      let _this = this;
      this.getCarDevice({
        id: this.formInfo.bidSection,
        fn (data) {
          _this.deviceList = data;
          _this.formInfo.thirdPartyId = data[0].id;
        }
      })
    },

    returnPreviousPage() {
      this.$parent.subPage = 0;
      this.$parent.refreshListData();
    },

    // 添加信息
    confirmModifData () {
      let _this = this;
      let { vehicleId } = this.formInfo;
      let parmas = this.formInfo;

      let url = vehicleId == undefined ? HttpInterface.URL_VEHICLE_ADD : HttpInterface.URL_VEHICLE_EDIT;
      HttpInterface.requestPost(this, url, parmas, function (response) {
        var data = response.data;
        if (data.success) {
          _this.$parent.subPage = 0;
          eventBus.$emit("getListInfo", _this.formInfo.bidSection);
          _this.successMessage('操作成功！');
        } else {
          _this.errorMessage('操作失败！');
        }
      }, null, false)
    },

    selectStaffInfo() {
      this.$refs.SelectStaffInfoRef.show(this.formInfo.thirdPartyId);
    },

    addStaffInfo() {
      this.$refs.AddStaffInfoRef.show();
    },

    getStaffInfo(row) {
      this.formInfo.name = row.personName;
      this.formInfo.personId = row.personId;
    },

    show(row) {
      this.formInfo = {
        number: "",
        name: "",
        brand: "1",
        carColor: "1",
        model: "0",
        brandColor: "0",
        bidSection: this.biaoduanList[0].id
      };
      this.getDeviceInfo();
      if (row != undefined) {
        this.title = "编辑车辆信息";
        this.formInfo = row;
      } else {
        this.title = "添加车辆信息";
      }
    }
  }
};
</script>

<style scoped lang="scss">
.content_padding{
  margin-top: 80px;

  .device_info{
    padding: 0 20px;
    box-sizing: border-box;
    margin-top: 30px;

    .config_info{
      margin: 30px 0 0 20px;
    }

    .basic_info{
      display: flex;
      margin-top: 26px;
      flex-wrap: wrap;
      justify-content: space-evenly;

      &:after{
        content: "";
        width: 478px;
      }
    }

    .title{
      width: 100%;
      font-weight: bold;
      line-height: 50px;
      display: inline-block;
      border-bottom: 1px solid rgb(236, 236, 236);
    }
  }
}

.info-box{
  margin: 12px 60px;
  display: flex;
  align-items: center;

  .txt{
    font-size: 14px;
    width: 90px;
    display: inline-block;
    text-align: right;
    margin-right: 8px;
  }

  .car-name{
    width: 182px;
  }

  .btn{
    margin-left: 10px;
  }
}

.info_top{
  margin-top: 20px;
}

.text_width{
  width: 126px;
  display: inline-block;
  text-align: right;
}

.input_width{
  width: 260px;
}

.el-button--text >>> .iconfanhui{
  margin-right: 4px;
  font-size: 18px;
  vertical-align: -2px;
}

.selector_width{
  width: 220px;
}

.el-button.is-circle{
  border-radius: 50% !important;
}
</style>
